<template>
	<view class="headers">
		<view class="touxiang">
			<image :src="list.shop_urls"></image>
		</view>
		<view class="jieshao">
			<div>
				<h3>{{list.shop_name}}</h3>
			</div>
			<div>
				<p>店主：{{list.true_name}}</p>
			</div>
			<div>
				<p>电话：{{list.tel}}</p>
			</div>

		</view>
		<view class="xiaoshoue">
			<div class="money">
				总销售额度：<span class="red">￥{{list.price}}</span>
			</div>
			<div>
			</div>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'Header',
		data() {
			return {
				shop_id:"",
				list: {
					shop_name: "默认",
					true_name: "默认",
					tel: "默认",
					shop_urls: "默认",
					price: "默认"
				}

			}
		},
		mounted() {
			console.log("88888888888")
		},
		beforeMount() {
			this.shop_ids()
		},
		methods: {
			getHeader(x) {
				console.log("获取店铺数据中");
				console.log(x);
				var that = this
				that.$flyio.get('v1.Shop/ShopInfo', {
					shop_id	:x
					}).then((ret) => {
						// console.log(ret.data[0]);
						that.list = ret.data[0]
						console.log("提交的返回");
						// console.log(ret.data[0])
					})
					.catch((e) => {
						console.log(e)
					})
			},
			shop_ids(){
				var that=this
				wx.getStorage({
				  key: 'shop_id',
				  success (res) {
					  that.shop_id=res.data
				    console.log(res.data)
					console.log("获取店铺id成功");
					that.getHeader(res.data)
				  },
				  fail(){
					  console.log("获取店铺id失败");
				  }
				})
			}
		}

	}
</script>

<style scoped="scoped" lang="scss">
	.headers {
		padding: 0 20upx;
		margin-bottom: 24upx;

		// box-sizing: border-box;
		// height: 230upx;
		h3 {
			font-size: 30upx;
		}

		// border-bottom: 1px solid #ffffff;
		// margin-bottom: 2upx;
		background-color: $f;
		align-items: center;
		font-size: 24upx;
		height: 230upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: left;

		p {
			color: lightslategray;
		}

		.touxiang {
			image {
				background-color: gainsboro;
				border-radius: 50%;
				width: 150upx;
				height: 150upx;
			}
		}

		.jieshao {
			// border: 1px solid red;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150upx;
			flex: 1;
			margin-left: 20upx;
		}

		.xiaoshoue {
			height: 100%;
			line-height: 132upx;
			color: #999999;

			.red {
				color: red;
			}
		}

	}
</style>
